<template>
    <div class="main">
        <top-bar></top-bar>
        <div class="main-mains w90">
            <div class="main-mains-l">
                <router-link to="/main">
                    <div class="main-mains-l-return">
                        <span>←</span>
                        返回首页
                    </div>
                </router-link>
                <div class="active">管理员工</div>
            </div>
            <div class="main-mains-r">
                <div class="main-mains-table" v-show="dataFlag">
                    <table>
                        <tr>
                            <th>姓名</th>
                            <th>工号</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(item,index) in dataList" :key="index">
                            <td>{{item.name}}</td>
                            <td>{{item.workNo}}</td>
                            <td>
                                <img @click="removeUser(item.id)" class="remove-img" src="../../../static/images/remove.png" alt="">
                            </td>
                        </tr>
                    </table>
                    <div class="main-pages">
                          <el-pagination background layout="prev, pager, next" :page-size="15" @current-change="changePage" :total="totalNum">
                          </el-pagination>
                    </div>
                </div>
                <div class="main-mains-none" v-show="!dataFlag">
                    <img src="../../../static/images/none.png" alt=""><br>
                    <div>暂无记录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../public/top";
export default {
  components: {
    topBar
  },
  data() {
    return {
      dataList: [],
      dataFlag: true,
      pages: 1,
      totalNum: 1
    };
  },
  methods: {
    changePage(val) {
      this.pages = val;
      this.getData();
    },
    removeUser(ids) {
      let _this = this;
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let datas = {
            id: ids
          };
          datas = JSON.stringify(datas);
          _this
            .$http({
              url: _this.urls + "/user/delete",
              method: "post",
              data:datas
            })
            .then(function(res) {
              let data = res.data;
              if (data.status == "success") {
                _this.$message({
                  showClose: true,
                  message: "删除成功",
                  type: "success"
                });
                _this.getData();
              } else {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: "error"
                });
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getData() {
      let _this = this;
      _this
        .$http({
          url:
            _this.urls +
            "/user/list.do" +
            "?PageSize=15&startPage=" +
            _this.pages,
          method: "get"
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.dataList = data.data.list;
            _this.totalNum = data.data.total;
            if (data.data.total) {
              _this.dataFlag = true;
            }
          } else {
            _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="less" scoped>
</style>

